<script setup lang="ts" name="CkToolbar">
import { storeToRefs } from 'pinia'
import { useDrag } from 'vue3-dnd'
import { getEmptyImage } from 'react-dnd-html5-backend'
import { toRefs } from '@vueuse/core'
import { useLayoutStore } from '@/store/bigScreen/layoutStore'
import { useDesignerStore } from '@/store/bigScreen/designerStore'
import { cloneDeep } from 'lodash-es'
import { getParent } from '../../../utils'

const layoutStore = useLayoutStore()

const { isLayoutDragging, isNearSelf, layout } = storeToRefs(layoutStore)

const props = defineProps({
  info: {
    type: Object,
    default: () => {
      return {}
    }
  },
  preview: {
    type: Boolean,
    default: false
  },
  index: {
    type: Number,
    default: 0
  }
})

const designerStore = useDesignerStore()

const { editCanvas } = storeToRefs(designerStore)

const setZoom = (type) => {
  designerStore.setZoom(type)
}

const [dragCollect, drag, preview] = useDrag({
  type: props.info.config.dragType,
  item: () => {
    const res = cloneDeep(props.info)
    res.component = null
    res.index = props.index
    if (res.config.position === 'wrapper') {
      res.parent = getParent(layout.value.wrapper, res.id)
      res.isNearMain = false
    } else if (res.config.position === 'content') {
      res.parent = getParent(layout.value.content, res.id)
      res.isNearMain = false
    } else {
      res.parent = getParent(layout.value.root, res.id)
      res.isNearMain = false
    }
    layoutStore.setCurrentDraggingPreviewModule(res)
    return res
  },
  canDrag: () => {
    return props.info.config.canDrag
  },
  collect: (monitor) => ({
    isDragging: monitor.isDragging()
  })
})

const { isDragging } = toRefs(dragCollect)

watch(
  () => isDragging.value,
  (value) => {
    isLayoutDragging.value = value
  }
)

onMounted(() => {
  preview(getEmptyImage(), { captureDraggingState: true })
})
</script>

<template>
  <div :class="['toolbar', isNearSelf ? 'active' : '', isDragging ? 'is-dragging' : '', props.preview ? 'preview' : '', props.info.config.position]">
    <div :ref="drag" class="drag-handle">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="button-group">
      <el-tooltip effect="light" content="打开文件" placement="bottom" :hide-after="100" popper-class="big-screen">
        <div class="item-button">
          <div class="button-icon">
            <svg-icon icon="ri:folder-open-line"></svg-icon>
          </div>
          <input type="file" ref="importRef" style="display: none" accept=".json" />
        </div>
      </el-tooltip>
      <el-tooltip effect="light" content="预览" placement="bottom" :hide-after="100" popper-class="big-screen">
        <div class="item-button"><svg-icon icon="ri:eye-line"></svg-icon></div>
      </el-tooltip>
      <el-tooltip effect="light" content="发布" placement="bottom" :hide-after="100" popper-class="big-screen">
        <div class="item-button"><svg-icon icon="ri:send-plane-line"></svg-icon></div>
      </el-tooltip>
    </div>
    <div class="button-group">
      <el-tooltip effect="light" content="撤销" placement="bottom" :hide-after="100" popper-class="big-screen">
        <div :class="['item-button']"><svg-icon icon="ri:arrow-go-back-line"></svg-icon></div>
      </el-tooltip>
      <el-tooltip effect="light" content="恢复" placement="bottom" :hide-after="100" popper-class="big-screen">
        <div :class="['item-button']"><svg-icon icon="ri:arrow-go-forward-line"></svg-icon></div>
      </el-tooltip>
      <el-tooltip effect="light" content="清空" placement="bottom" :hide-after="100" popper-class="big-screen">
        <div class="item-button"><svg-icon icon="ri:eraser-line"></svg-icon></div>
      </el-tooltip>
    </div>
    <div class="button-group">
      <el-tooltip effect="light" content="缩小视图" placement="bottom" :hide-after="100" popper-class="big-screen">
        <div class="item-button" @click="setZoom('zoomIn')"><svg-icon icon="ri:zoom-out-line"></svg-icon></div>
      </el-tooltip>
      <el-tooltip effect="light" content="重置视图" placement="bottom" :hide-after="100" popper-class="big-screen">
        <div class="item-button input" @click="setZoom('zoom1')">{{ Math.floor(editCanvas.scale * 100) + '%' }}</div>
      </el-tooltip>
      <el-tooltip effect="light" content="放大视图" placement="bottom" :hide-after="100" popper-class="big-screen">
        <div class="item-button" @click="setZoom('zoomOut')"><svg-icon icon="ri:zoom-in-line"></svg-icon></div>
      </el-tooltip>
    </div>
    <div class="button-group">
      <el-tooltip effect="light" content="键盘快捷键" placement="bottom" :hide-after="100" popper-class="big-screen">
        <div class="item-button"><svg-icon icon="ri:keyboard-box-line"></svg-icon></div>
      </el-tooltip>
    </div>
  </div>
</template>

<style scoped lang="scss">
.toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  background-color: var(--el-header-bg-color);
  border: 1px solid var(--el-bg-color-page);
  border-bottom: none;

  &.is-dragging{
    * {
      opacity: 0;
    }

    &.active {
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 2px solid var(--el-color-primary);
        content: '';
      }
    }
  }

  &.root{
    .drag-handle{
      background-color: var(--el-bg-color-overlay);
      border-right: 1px solid var(--el-bg-color-page);
    }
  }

  &.preview{
    border: 1px solid var(--el-bg-color-page);
    transition: opacity 0.3s;
  }

  &.root{
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--el-bg-color-page);

    &.is-dragging{
      opacity: 0;
    }

    .button-group{
      flex-wrap: nowrap;
    }
  }

  .drag-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 13px;

    span {
      width: 2px;
      height: 3px;
      border-top: 1px solid var(--el-bg-color);
      border-bottom: 1px solid var(--el-bg-color);
    }

    span+span {
      margin-top: 1px;
    }
  }

  .button-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 2px 2px 3px;

    .el-dropdown {
      .item-button {
        width: auto;
        line-height: 0;

        .el-icon {
          margin-left: 6px;
        }

        .el-icon+.el-icon {
          margin-right: 2px;
          margin-left: 0;
        }
      }
    }

    .item-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      margin: 2px;
      border-radius: 2px;
      cursor: pointer;

      &.input {
        width: 70px;
      }

      &:hover {
        background-color: var(--el-color-primary-light-9);

        .el-icon {
          color: var(--el-color-primary);
        }
      }

      .el-icon {
        font-size: 20px !important;
      }
    }
  }

  .button-group+.button-group{
    border-left: 1px solid var(--el-bg-color-page);
  }
}
</style>
